<template>
	<view class="wrapper" style="overflow: hidden;">
		<uni-nav-bar
			leftIcon="back"
			right-icon="more-filled"
			:title="userinfo.name"
			@clickLeft="$back"
			@clickRight="$open('./info?id=' + id)"
			backgroundColor="#f3f3f3"
		></uni-nav-bar>
		<scroll-view scroll-y="true" id="scrollview" class="chat_main" :style="{ height: height }" :scroll-with-animation="true" :scroll-top="scrollTop">
			<!-- <view class="newFriend center f24 cfff">你们已经成为好友，开始聊天吧</view> -->
			<view class="newFriend center f24 cfff" @tap="lookMore" v-if="ismore">
				查看更多消息
			</view>
			<view v-for="(val, index) in newList" :key="val._id" class="main-item">
				<!-- <view class="time tCenter f24 c666">2020-03-05 14:25</view> -->
				<!-- 我的文本消息 direction 1对方的消息 0我的消息 -->
				<view class="my_new new flex-end center" v-if="val.contentType == 1 && val.sender == myUserId">
					<!-- 阅读状态 -->
					<!-- <view class="new_state center f18 cfff read">已读</view> -->
					<!-- 文本消息 -->
					<view class="new_text f28" :style="{ 'font-size': fontSize + 'rpx' }" v-html="goUrl(val.content)"></view>
					<image src="../../static/chatFriend/right.png" mode="aspectFill" class="arr"></image>
					<!-- 头像 -->
					<dimg :src="val.sender | avatar" mode="aspectFill" class="avatar"></dimg>
				</view>
				<!-- 对方的文本消息 -->
				<view class="new flex-start center" v-if="val.contentType == 1 && val.sender != myUserId">
					<!-- 头像 -->
					<dimg :src="val.sender | avatar" mode="aspectFill" class="avatar"></dimg>
					<image src="../../static/chatFriend/left.png" mode="aspectFill" class="arr"></image>
					<!-- 文本消息 -->
					<view class="new_text f28" :style="{ 'font-size': fontSize + 'rpx' }" v-html="goUrl(val.content)"></view>
				</view>
				<!-- 我的表情消息 direction 1对方的消息 0我的消息 -->
				<view class="my_new new flex-end center" v-if="val.contentType == -1 && val.sender == myUserId">
					<!-- 阅读状态 -->
					<!-- <view class="new_state center f18 cfff read">已读</view> -->
					<!-- 文本消息 -->
					<view class="new_text f28"><image :src="val.content" mode="widthFix" class="emoji"></image></view>
					<image src="../../static/chatFriend/right.png" mode="aspectFill" class="arr"></image>
					<!-- 头像 -->
					<dimg :src="val.sender | avatar" mode="aspectFill" class="avatar"></dimg>
				</view>
				<!-- 对方的表情消息 -->
				<view class="new flex-start center" v-if="val.contentType == -1 && val.sender != myUserId">
					<!-- 头像 -->
					<dimg :src="val.sender | avatar" mode="aspectFill" class="avatar"></dimg>
					<image src="../../static/chatFriend/left.png" mode="aspectFill" class="arr"></image>
					<!-- 文本消息 -->
					<view class="new_text f28"><image :src="val.content" mode="widthFix" class="emoji"></image></view>
				</view>
				<!-- 我的图片消息 direction 1对方的消息 0我的消息 -->
				<view class="my_new new flex-end center" v-if="val.contentType == 2 && val.sender == myUserId">
					<!-- 阅读状态 -->
					<!-- <view class="new_state center f18 cfff read">已读</view> -->
					<!-- 文本消息 -->
					<image class="img_new" :src="val.content" mode="widthFix" @tap="previewImage(val.content)"></image>

					<image src="../../static/chatFriend/right.png" mode="aspectFill" class="arr"></image>
					<!-- 头像 -->
					<dimg :src="val.sender | avatar" mode="aspectFill" class="avatar"></dimg>
				</view>
				<!-- 对方的图片消息 -->
				<view class="new flex-start center" v-if="val.contentType == 2 && val.sender != myUserId">
					<!-- 头像 -->
					<dimg :src="val.sender | avatar" mode="aspectFill" class="avatar"></dimg>
					<image src="../../static/chatFriend/left.png" mode="aspectFill" class="arr"></image>
					<!-- 文本消息 -->
					<image class="img_new" :src="val.content" mode="widthFix" @tap="previewImage(val.content)"></image>
				</view>
				<!-- 我的位置消息 direction 1对方的消息 0我的消息 -->
				<view class="my_new new flex-end center" v-if="val.contentType == 4 && val.sender == myUserId">
					<!-- 阅读状态 -->
					<!-- <view class="new_state center f18 cfff read">已读</view> -->
					<!-- 位置消息 -->
					<view class="new_text f28" @tap="openMap(val.body[0], val.body[1])">
						<map :longitude="val.body[0]" :latitude="val.body[1]" :markers="val.body[0] | mark(val.body[1])"></map>
					</view>
					<image src="../../static/chatFriend/right.png" mode="aspectFill" class="arr"></image>
					<!-- 头像 -->
					<dimg :src="val.sender | avatar" mode="aspectFill" class="avatar"></dimg>
				</view>
				<!-- 对方的位置消息 -->
				<view class="new flex-start center" v-if="val.contentType == 4 && val.sender != myUserId">
					<!-- 头像 -->
					<dimg :src="val.sender | avatar" mode="aspectFill" class="avatar"></dimg>
					<image src="../../static/chatFriend/left.png" mode="aspectFill" class="arr"></image>
					<!-- 位置消息 -->
					<view class="new_text f28" @tap="openMap(val.body[0], val.body[1])">
						<map :longitude="val.body[0]" :latitude="val.body[1]" :markers="val.body[0] | mark(val.body[1])"></map>
					</view>
				</view>
				<!-- 我的语音消息 -->
				<view class="my_new new flex-end center" v-if="val.contentType == 3 && val.sender == myUserId">
					<!-- 阅读状态 -->
					<!-- <view class="new_state center f18 cfff">送达</view> -->
					<!-- 文本消息 -->
					<view class="new_text f28 center flex-end" @tap="playAudio(val.content)">
						{{ val.body | seconed }}′′
						<image src="../../static/chatFriend/audio-left.png" mode="aspectFill" class="audio_img"></image>
					</view>
					<image src="../../static/chatFriend/right.png" mode="aspectFill" class="arr"></image>
					<!-- 头像 -->
					<dimg :src="val.sender | avatar" mode="aspectFill" class="avatar"></dimg>
				</view>
				<!-- 对方的语音消息 -->
				<view class=" new flex-start center" v-if="val.contentType == 3 && val.sender != myUserId">
					<!-- 头像 -->
					<dimg :src="val.sender | avatar" mode="aspectFill" class="avatar"></dimg>
					<image src="../../static/chatFriend/left.png" mode="aspectFill" class="arr"></image>
					<view class="new_text f28 center flex-end" @tap="playAudio(val.content)">
						<image src="../../static/chatFriend/audio-right.png" mode="aspectFill" class="audio_img"></image>
						{{ val.body | seconed }}′′
					</view>
				</view>
				<!-- 我发的红包 -->
				<!-- <view class="my_new new flex-end center" @tap="$open('../money/red_give_detile')"> -->
				<!-- 阅读状态 -->
				<!-- <view class="new_state center f18 cfff">送达</view> -->
				<!-- 文本消息 -->
				<!-- <view class="red_box">
						<view class="red_top center">
							<image src="../../static/chatFriend/red.png" mode="aspectFill" class="red"></image>
							<view class="flex cfff"><view class="f28">恭喜发财,万事如意</view></view>
						</view>
						<view class="red_bottom f22 c999">专聊红包</view>
					</view> -->
				<!-- 头像 -->
				<!-- <image src="../../static/delet/sqq.png" mode="aspectFill" class="avatar"></image> -->
				<!-- </view> -->
				<!-- <view class="red_get f24 cfff center">一点小情绪领取了你的红包</view> -->
				<!-- 对方发的红包 -->
				<!-- <view class=" new flex-start center"> -->
				<!-- 头像 -->
				<!-- <image src="../../static/delet/sqq.png" mode="aspectFill" class="avatar"></image> -->
				<!-- 文本消息 -->
				<!-- <view class="red_box" @tap="changeRed">
						<view class="red_top center">
							<image src="../../static/chatFriend/red.png" mode="aspectFill" class="red"></image>
							<view class="flex cfff"><view class="f28">恭喜发财,万事如意</view></view>
						</view>
						<view class="red_bottom f22 c999">专聊红包</view>
					</view>
				</view> -->
				<!-- 我发的名片 -->
				<view class="my_new new flex-end center" v-if="val.contentType == 8 && val.sender == myUserId">
					<!-- 名片消息 -->
					<view class="card_box" @tap="openfriend(val.body)">
						<view class="card_top center">
							<dimg :src="val.body | myavatar" mode="aspectFill" class="card_img"></dimg>
							<view class="flex">
								<view class="f26">{{ val.content }}</view>
							</view>
						</view>
						<view class="card_bottom f22 c999">名片</view>
					</view>
					<!-- 头像 -->
					<dimg :src="val.sender | avatar" mode="aspectFill" class="avatar"></dimg>
				</view>
				<!-- 对方发的名片 -->
				<view class=" new flex-start center" v-if="val.contentType == 8 && val.sender != myUserId">
					<!-- 头像 -->
					<dimg :src="val.sender | avatar" mode="aspectFill" class="avatar"></dimg>
					<!-- 名片消息 -->
					<view class="card_box" @tap="openfriend(val.body)">
						<view class="card_top center">
							<dimg :src="val.body | myavatar" mode="aspectFill" class="card_img"></dimg>
							<view class="flex">
								<view class="f26">{{ val.content }}</view>
							</view>
						</view>
						<view class="card_bottom f22 c999">名片</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 底部输入框 -->
		<view class="input_bottom center space-between">
			<!-- <image src="../../static/chatFriend/audio.png" mode="aspectFill" @longtap="recored" @touchend="sendAudio"></image> -->
			<input type="text" @confirm="send(false)" v-model="content" maxlength="10000" />
			<image src="../../static/chatFriend/happy.png" mode="aspectFill" @tap="changeSwiper(0)"></image>
			<image src="../../static/chatFriend/add.png" mode="aspectFill" @tap="changeSwiper(1)"></image>
		</view>
		<!-- 表情弹出操作层 -->
		<swiper :indicator-dots="true" class="bottom_swiper" indicator-active-color="#0297FE" v-show="swiperType == 0">
			<swiper-item style="height: 400rpx;">
				<view class="swiper-item center fWrap flex-start">
					<image @tap="send(index)" :src="val" mode="aspectFit" v-for="(val, index) in emojl" :key="index" class="emojl_img"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item center fWrap flex-start" style="margin-top: -400rpx;">
					<image :src="val" mode="aspectFit" @tap="send(index)" v-for="(val, index) in emojl" :key="index" class="emojl_img"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 底部弹出操作层 -->
		<swiper :indicator-dots="true" class="bottom_swiper" indicator-active-color="#0297FE" v-show="swiperType == 1">
			<swiper-item>
				<view class="swiper-item center fWrap flex-start f24 c666">
					<view class="swiper_box center colum" @tap="sendImg('album')">
						<image src="../../static/chatFriend/swiper01.png" mode="aspectFill"></image>
						照片
					</view>
					<view class="swiper_box center colum" @tap="sendImg('camera')">
						<image src="../../static/chatFriend/swiper02.png" mode="aspectFill"></image>
						拍摄
					</view>
					<!-- <view class="swiper_box center colum">
						<image src="../../static/chatFriend/swiper03.png" mode="aspectFill"></image>
						语音会议
					</view> -->
					<view class="swiper_box center colum" @tap="$open('../find/getAdress')">
						<image src="../../static/chatFriend/swiper04.png" mode="aspectFill"></image>
						位置
					</view>
					<!-- 					<view class="swiper_box center colum" @tap="$open('../money/red')">
						<image src="../../static/chatFriend/swiper05.png" mode="aspectFill"></image>
						发红包
					</view>
					<view class="swiper_box center colum">
						<image src="../../static/chatFriend/swiper06.png" mode="aspectFill"></image>
						专聊转账
					</view> -->
					<!-- 					<view class="swiper_box center colum">
						<image src="../../static/chatFriend/swiper09.png" mode="aspectFill"></image>
						文件
					</view> -->
					<view class="swiper_box center colum" @tap="$open('./sendCard?roomid=' + userinfo.jid+'&qunzhuid='+userinfo.member.userId)">
						<image src="../../static/chatFriend/swiper08.png" mode="aspectFill"></image>
						名片
					</view>
				</view>
			</swiper-item>
			<!-- <swiper-item>
				<view class="swiper-item center fWrap flex-start f24 c666">
					<view class="swiper_box center colum">
						<image src="../../static/chatFriend/swiper07.png" mode="aspectFill"></image>
						收藏
					</view>
					<view class="swiper_box center colum">
						<image src="../../static/chatFriend/swiper10.png" mode="aspectFill"></image>
						联系人
					</view> 
					<view class="swiper_box center colum">
						<image src="../../static/chatFriend/swiper11.png" mode="aspectFill"></image>
						戳一戳
					</view>
				</view>
			</swiper-item> -->
		</swiper>
		<!-- 领红包弹出层 -->
		<view class="alert-wrapper center colum red_alert" v-if="showRed">
			<view class="red_main" @tap="$open('../money/red_give_detile')">
				<view class="user_box center f28">
					<image src="../../static/delet/sqq.png" mode="aspectFill"></image>
					蒲公英的红包
				</view>
				<view class="f40 tCenter">恭喜发财，万事如意</view>
			</view>
			<image src="../../static/chatFriend/closeRed.png" mode="aspectFill" class="close_red" @tap="changeRed"></image>
		</view>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import { avatarUrl, uploadUrl } from '@/common/config.js';
import { emojl } from '../../common/emoji.js';
import WEBIM from '@/common/webim.js';
import UI from '@/common/chat-ui.js';
export default {
	data() {
		return {
			height: 'calc(100% - 280rpx)', // 高度
			showRed: false,  //红包弹出层
			id: '',  //房间roomid
			userinfo: '',  //登录用户的信息 
			newList: [],  //聊天消息列表
			scrollTop: 0, //滚动高度
			friendindex: 0, //首页消息索引
			content: '',  //输入框内容
			r: '',        //录音对象 
			recoredUrl: '',  //录音上传回调地址
			swiperType: 0,   //底部弹出层状态 1表情 2其他操作
			emojl: [],  //表情包列表
			fontSize: uni.getStorageSync('fontSize') || '28',
			myUserId: uni.getStorageSync('userinfo').userId,
			pageIndex:0, //当前页面数据索引
			isScroll:true, //是否需要自动滚动到底部
			ismore:true //是否展示加载更多按钮
		};
	},
	watch: {
		// 监听新消息重新滚动,并且清除首页新消息数量
		newList() {
			let that = this;
			if(that.isScroll){
				setTimeout(function() {
					that.$nextTick(() => {
						that.scrollToBottom();
						that.clearIndexNew();
					});
				}, 800);
			}
		}
	},
	components: { uniNavBar },
	onLoad(e) {
		// 赋值用户id
		this.id = e.id;
		this.friendindex = e.index;
		this.emojl = emojl;
		
	},
	onShow() {
		// 查询群组信息
		this.userGet();
		this.height='calc(100% - 280rpx)'
		this.isScroll=true
		if (getApp().globalData.findAdress.location) {
			this.sendMap();
		}
	},
	methods: {
		goUrl(txt) {
			var reg = /(((https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/gi;
			var result = txt.replace(reg, function(item) {
				item.indexOf('http') == -1 ? (item = 'http://' + item) : item;
				return `<span onclick="plus.runtime.openWeb('${item}')" style='color:#0055ff'>${item}</span>`;
			});
			return result;
		},
		// 发送语音
		sendAudio() {
			this.r.stop();
			var msg = WEBIM.createMessage(3, this.recoredUrl, this.userId, this.userinfo.nickname, 'chat');
			msg.id = msg.messageId;
			WEBIM.sendMessage(msg);
			this.addIndexList();
			this.getNew(msg, 0);
		},
		// 录音
		recored() {
			let that = this;
			this.$sToast('录音开始,松开即可发送', 2000);
			this.r = plus.audio.getRecorder();
			this.r.record(
				{ filename: '_doc/audio/' },
				function(res) {
					uni.uploadFile({
						url: uploadUrl + that.apiList.UploadifyServlet,
						filePath: res,
						name: 'file',
						formData: {
							id: 'skimweb_' + uni.getStorageSync('userinfo').userId + new Date().getTime()
						},
						success: uploadFileRes => {
							console.log(uploadFileRes.data);
							const { url } = JSON.parse(uploadFileRes.data);
							that.recoredUrl = url;
						}
					});
				},
				function(e) {
					alert('Audio record failed: ' + e.message);
				}
			);
		},
		// 发送文字消息
		send(content) {
			if (content) {
				this.content = content;
				this.changeSwiper();
			}
			if (this.content == '') {
				return;
			}
			// 发送消息

			var msg = this.createMessage(1, this.content);
			WEBIM.sendMessage(msg);
			this.content = '';
			this.addIndexList();
			this.getNew(msg, 0);
		},
		// 创建消息
		createMessage(type, content) {
			let msg = {
				chatType: 'groupchat',
				content: content,
				fromUserId: uni.getStorageSync('userinfo').userId,
				fromUserName: uni.getStorageSync('userinfo').nickname,
				id: WEBIM.randomUUID(),
				isGroup: 1,
				messageId: WEBIM.randomUUID(),
				reSendCount: 5,
				timeSend: WEBIM.getServerTime(),
				to: this.userinfo.jid,
				toJid: this.userinfo.jid,
				toUserId: this.userinfo.jid,
				toUserName: this.userinfo.name,
				type: type
			};
			return msg;
		},
		// 发送位置消息
		sendMap() {
			var msg = this.createMessage(
				4,
				'https://api.map.baidu.com/staticimage?width=320&amp;height=240&amp;&amp;zoom=15&amp;markers=' +
					getApp().globalData.findAdress.longitude +
					',' +
					getApp().globalData.findAdress.latitude +
					'&amp;zoom=15'
			);
			msg.objectId = getApp().globalData.findAdress.location;
			msg.location_y = getApp().globalData.findAdress.longitude;
			msg.location_x = getApp().globalData.findAdress.latitude;
			WEBIM.sendMessage(msg);
			this.addIndexList();
			this.getNew(msg, 0);
			this.changeSwiper();
			getApp().globalData.findAdress = {
				longitude: '',
				latitude: '',
				location: ''
			};
		},
		// 发送图片消息
		sendImg(type) {
			let that = this;
			uni.chooseImage({
				count: 1,
				sourceType: [type],
				success: chooseImageRes => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					uni.uploadFile({
						url: uploadUrl + that.apiList.UploadifyServlet,
						filePath: tempFilePaths[0],
						name: 'file',
						formData: {
							id: 'skimweb_' + uni.getStorageSync('userinfo').userId + new Date().getTime()
						},
						success: uploadFileRes => {
							const { url } = JSON.parse(uploadFileRes.data);
							var msg = this.createMessage(2, url);
							WEBIM.sendMessage(msg);
							that.changeSwiper();
							that.addIndexList();
							that.getNew(msg, 0);
						}
					});
				}
			});
		},
		// 点击名片打开用户详情
		openfriend(value) {
			this.$open('../friend/friend?userId=' + JSON.parse(value).objectId);
		},
		// 插入首页最近聊天列表
		addIndexList() {
			let list = uni.getStorageSync('list') || [];
			list.map((item, index) => {
				if (item.jid == this.userinfo.jid) {
					list.splice(index, 1);
				}
			});
			
			let msg = {
				Unread: 0,
				chatTime: new Date().getTime() / 1000,
				chatType: 'groupchat',
				fromUserId: this.myUserId,
				id: this.userinfo.id,
				jid: this.userinfo.jid,
				newMsg: '暂无新消息',
				remarkName: this.userinfo.name,
				toUserId: this.userinfo.jid,
				top: 0,
				type: 2
			};
			list.unshift(msg);
			uni.setStorageSync('list', list);
		},
		// 构建新消息
		getNew(msg, direction) {
			this.isScroll=true
			uni.hideKeyboard();
			let newMsg = {
				content: msg.content,
				direction: direction,
				contentType: msg.type,
				receiver: msg.fromUserId,
				sender: direction == 0 ? this.myUserId : msg.fromUserId,
				id: msg.id
			};
			// 判断表情
			if (msg.type == 1) {
				for (let key in emojl) {
					if (msg.content == key) {
						newMsg.contentType = -1;
						newMsg.content = emojl[key];
					}
				}
			}
			//判断地图
			if (msg.type == 4) {
				newMsg.body = [msg.location_y, msg.location_x];
			}
			//判断名片
			if (msg.type == 8) {
				newMsg.body = JSON.stringify({ objectId: msg.fromUserId });
			}
			// 去重发一条消息，会受到两条回调
			let is = false;
			this.newList.map(item => {
				if (item.id == msg.id) {
					is = true;
				}
			});
			if (is) {
				return;
			}
			this.newList.push(newMsg);
		},
		// 清空首页列表小红点
		clearIndexNew() {
			let list = uni.getStorageSync('list');
			list[this.friendindex].Unread = 0;
			uni.setStorageSync('list', list);
		},
		// 自动滚动到底部
		scrollToBottom() {
			let query = uni.createSelectorQuery(),
				that = this;
			//这个是你所有渲染的view 的高度 下面自己添加样式的 边距之类的数据
			query
				.in(this)
				.selectAll('.main-item')
				.boundingClientRect();
			//这个是id
			query
				.in(this)
				.select('#scrollview')
				.boundingClientRect();
			query.exec(res => {
				let mitemHeight = 0;
				//累加所有元素的高度和边距
				res[0].forEach(rect => (mitemHeight = mitemHeight + rect.height + 40));
				//只有大于 滚动条的高度 再设置
				that.scrollTop = mitemHeight + 100;
			});
		},
		// 查询群组信息
		userGet() {
			let that = this;
			this.$ajax(
				this.apiList.getRoom,
				{
					roomId: this.id
				},
				'POST'
			).then(res => {
				this.userinfo = res.data;
				this.shikuMsgs(res.data.jid);
				// 监听收到消息
				uni.$on('onmessage', function(data) {
					const { msg } = data;
					// 收到当前用户信息
					if (msg.toJid == that.userinfo.jid) {
						that.getNew(msg, 1);
					}
				});
			});
		},
		// 查看更多聊天记录
		lookMore(){
			this.isScroll=false
			this.pageIndex++
			this.shikuMsgs(this.userinfo.jid)
		},
		// 查询聊天记录
		shikuMsgs(jid) {
			this.$ajax(
				this.apiList.shiku_muc_msgs,
				{
					pageIndex: this.pageIndex,
					pageSize: 20,
					endTime: 0,
					maxType: 0,
					roomId: jid
				},
				'POST'
			).then(res => {
				// 格式化地图数据
				res.data.forEach(item => {
					if (item.contentType == 4) {
						item.body = item.body.substring(item.body.indexOf('markers=') + 8, item.body.lastIndexOf('&amp')).split(',');
						return item;
					}
				});
				// 把表情type重新赋值为-1,并替换路径
				res.data.forEach(item => {
					for (let key in emojl) {
						if (item.content == key) {
							item.contentType = -1;
							item.content = emojl[key];
							return item;
						}
					}
				});
				// res.data= res.data.reverse();
				if(res.data.length==0){
					this.$sToast('暂无更多聊天记录')
					this.ismore=false
				}
				res.data.map(item=>{
					this.newList.unshift(item)
				})
			});
		},
		// 红包弹出
		changeRed() {
			this.showRed = !this.showRed;
		},
		// 底部轮播弹出
		changeSwiper(type) {
			this.swiperType = type;
			this.height == 'calc(100% - 280rpx)' ? (this.height = 'calc(100% - 717rpx)') : (this.height = 'calc(100% - 280rpx)');
		},
		// 预览图片
		previewImage(url) {
			console.log(url);
			uni.previewImage({
				urls: [url]
			});
		},
		// 打开定位
		openMap(x, y) {
			console.log(x);
			uni.openLocation({
				longitude: +x,
				latitude: +y
			});
		},
		// 播放语音
		playAudio(url) {
			console.log(url);
			const innerAudioContext = uni.createInnerAudioContext(),
				that = this;
			this.$ajax(
				this.apiList.amrToMp3,
				{
					paths: url
				},
				'POST',
				{ 'content-type': 'application/x-www-form-urlencoded' },
				'upload'
			).then(res => {
				innerAudioContext.autoplay = true;
				innerAudioContext.src = res.data[0].oUrl;
				innerAudioContext.onPlay(() => {
					that.$sToast('开始播放');
				});
				innerAudioContext.onError(res => {
					that.$sToast('播放失败');
				});
			});
		}
	},
	filters: {
		myavatar(value) {
			let userid = +JSON.parse(value).objectId;
			return avatarUrl + 'avatar/o/' + (parseInt(userid) % 10000) + '/' + userid + '.jpg';
		},
		mark(x, y) {
			let list = [
				{
					id: 1,
					longitude: x,
					latitude: y
				}
			];
			return list;
		},
		seconed(str) {
			return JSON.parse(str).timeLen;
		}
	}
};
</script>

<style lang="scss">
.lookMore{
	padding: 20rpx 0;
}
.red_alert {
	.close_red {
		width: 78rpx;
		height: 78rpx;
		margin-top: 80rpx;
	}
	.user_box {
		padding: 238rpx 0 27rpx;
		image {
			width: 44rpx;
			height: 44rpx;
			margin-right: 20rpx;
			border-radius: 50%;
		}
	}
	.red_main {
		width: 530rpx;
		height: 880rpx;
		color: #ff9933;
		background: url(../../static/chatFriend/getRed.png) no-repeat;
		background-size: 100% 100%;
	}
}
.chat_main {
	transition: height 0.3s;
}
.bottom_swiper {
	height: 428rpx;
	border-top: 1rpx solid #e0e0e0;
	.swiper-item {
		padding: 40rpx 50rpx;
		.emojl_img {
			width: 50rpx;
			height: 50rpx;
			margin: 20rpx;
		}
	}
	.swiper_box {
		margin-bottom: 50rpx;
		&:not(:nth-of-type(4n)) {
			margin-right: 95rpx;
		}
		image {
			width: 90rpx;
			height: 90rpx;
			margin-bottom: 20rpx;
		}
	}
}
.input_bottom {
	height: 110rpx;
	background: #f2f3f5;
	border-top: 1rpx solid #e0e0e0;
	input {
		width: 520rpx;
		height: 70rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 8rpx;
		line-height: 70rpx;
		text-indent: 10rpx;
		margin-left: 40rpx;
	}
	image {
		width: 50rpx;
		height: 50rpx;
		margin: 0 10rpx;
		border-radius: 50%;
	}
}
.red_get {
	height: 50rpx;
	padding: 0 24rpx;
	margin: 20rpx auto 20rpx 207rpx;
	background: rgba(188, 188, 188, 1);
	border-radius: 25rpx;
	width: fit-content;
}
.new {
	padding: 10rpx 25rpx;
	align-items: flex-start;

	.card_box {
		width: 420rpx;
		border-radius: 12rpx;
		overflow: hidden;
		margin: 0 17rpx;
		padding: 20rpx 20rpx 0;
		background: #ffffff;
		.card_top {
			padding-bottom: 20rpx;
		}
		.card_img {
			width: 86rpx;
			height: 86rpx;
			margin-right: 21rpx;
		}
		.card_bottom {
			height: 38rpx;
			line-height: 38rpx;
			text-indent: 1rpx;
			border-top: 1rpx solid #e0e0e0;
		}
	}
	.red_box {
		width: 420rpx;
		background: rgba(255, 166, 30, 1);
		border-radius: 12rpx;
		overflow: hidden;
		margin: 0 17rpx;
		.red {
			width: 46rpx;
			height: 54rpx;
			margin: 0 21rpx;
		}
		.f28 {
			margin-bottom: 4rpx;
			max-width: 250rpx;
		}
		.red_bottom {
			height: 42rpx;
			background: #ffffff;
			line-height: 42rpx;
			text-indent: 21rpx;
		}
		.red_top {
			height: 126rpx;
		}
		.red_img {
			width: 70rpx;
			height: 70rpx;
			margin: 0 10rpx 0 15rpx;
		}
	}
	.audio_img {
		width: 22rpx;
		height: 30rpx;
		margin: 0 18rpx;
	}
	.new_state {
		height: 30rpx;
		background: #7cd580;
		border-radius: 4rpx;
		padding: 0 6rpx;
		margin: 0 15rpx;
	}
	.read {
		background: #74b5ed;
	}
	.img_new {
		width: 460rpx;
		height: 460rpx;
	}
	.new_text {
		padding: 23rpx 21rpx;
		max-width: 515rpx;
		background: #ffffff;
		word-break: break-all;
		.emoji {
			width: 50rpx;
			height: 50rpx;
		}

		map {
			width: 460rpx;
			height: 460rpx;
		}
	}
	.arr {
		width: 15rpx;
		height: 15rpx;
		margin: 26rpx 0 0 10rpx;
	}
	.avatar {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		overflow: hidden;
	}
}
.my_new {
	.new_text {
		background: #0fd7d9;
	}
	.arr {
		margin: 26rpx 10rpx 0 0;
	}
}
.newFriend {
	width: 380rpx;
	height: 50rpx;
	background: rgba(188, 188, 188, 1);
	border-radius: 25rpx;
	margin: 20rpx auto;
}
page {
	background: #f3f3f3;
}
</style>
